<template>
  <!-- 顶部tab -->
  <div class="vertical-tab-box">
    <!-- 导航tab -->
    <!-- 默认导航 -->
    <defaultTab
      v-if="tabStyle == 1"
      :propsData="propsData"
      :active="active"
      @changeTab="changeTab"
      @handleClassifyTabItem="verticalTabItemEdit"
    ></defaultTab>
    <!-- 带副标题的导航 -->
    <subtitleTab
      v-if="tabStyle == 2 || tabStyle == 3"
      :propsData="propsData"
      :active="active"
      @changeTab="changeTab"
      @handleClassifyTabItem="verticalTabItemEdit"
    ></subtitleTab>
  </div>
</template>

<script>
import defaultTab from "./defaultTab.vue";
import subtitleTab from "./subtitleTab.vue";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  components: {
    defaultTab,
    subtitleTab,
  },
  mounted() {
      console.log('垂直的！！！',this.tabStyle)
  },
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    tabStyle() {
      return this.propsData.params.tabStyle || "1";
    },
  },
  methods: {
    // 点击切换tab
    changeTab(e) {
      this.$emit("verticalTabChange", e);
    },
    // 点击编辑当前状态
    verticalTabItemEdit(e) {
      this.$emit("handleClassifyTabItem", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.vertical-tab-box{
  width: 100%;
  overflow: hidden;
}
.classify-list {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  .classify-item {
    margin-right: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    .classify-name {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 22px;
      color: #262626;
      margin-bottom: 0;
    }
    .active-box {
      width: 100%;
      height: 3px;
      margin-top: 2px;
    }
    .active {
      background: #fa2c1b;
    }
    .item-hover {
      width: 100%;
      height: 100%;
      border: 1px solid #1890fc;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      .edit-box {
        width: 20px;
        height: 20px;
        background: #1890fc;
        border-radius: 0px 0px 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        .iconfont {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
  }
  .classify-item:last-child {
    margin-right: 0;
  }
  .classify-item:hover > .item-hover {
    display: block;
  }
}
</style>
